<template>
  <view class="notice-bar-wrapper">
    <view class="notice-bar-flex">
      <view class="notice-bar-left">
      
          <!-- <u-icon name="volume-fill" color="#3C75FA" size="32rpx" /> -->
          <u-image src="/static/volume-fill.svg" width="37rpx" height="37rpx" />
          <u-image src="/static/notice-blue.svg" width="104rpx" height="45rpx" />
      
        <!-- <text class="notice-bar-title-blue">最新</text><text class="notice-bar-title-orange">公告</text> -->
      </view>
      <view class="notice-bar-content">
         <swiper :vertical="true" class="notice-bar-swiper" :circular="true" :autoplay="true" :interval="3000">
          <swiper-item v-for="(item, index) in noticeList" :key="index">
            <view class="notice-bar-swiper-item">
              <text @click="handleMore(item)" class="notice-bar-swiper-item-text u-line-1">{{ item.noticeTitle }}</text>
            </view>
          </swiper-item>
         </swiper>
      </view>
      <view class="notice-bar-right" @click="handleMoreList">
          更多
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    noticeList:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      // noticeList: [
      //   '业主投票大会正在进行中...',
      //   '请及时关注投票进展！',
      //   '如有疑问请联系我们。'
      // ]
    }
  },
  methods: {
    handleMoreList(){
      uni.navigateTo({
        url: `/pages/newslist/index`
      })
    },
    handleMore(row) {
   
      uni.navigateTo({
        url: `/pages/notice/index?id=${row.id}`
      })
      // 跳转到公告详情或更多页面
      // this.$emit('more');
    }
  }
}
</script>

<style scoped>
.notice-bar-wrapper {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.notice-bar-flex {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8rpx;
  height: 88rpx;
  padding:25rpx 16rpx ;
}
.notice-bar-left {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
  height: 100%;
  position: relative;
  top: 2rpx;
}
.notice-bar-icon {
  width: 40rpx;
  height: 40rpx;
  background: #e6f0ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.notice-bar-content {
  width: 307rpx;
  height: 45rpx;
}
swiper{
    width: 100%;
    height: 100%;
}
swiper-item{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notice-bar-swiper-item{
  width: 100%;
}
.notice-bar-swiper-item-text{
  width: 100%;
    height: 100%;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    text-align: left;
}
.notice-bar-right{
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
    border-left: 1rpx solid #999999;
    padding-left: 16rpx;
    margin-left: 16rpx;
    position: absolute;
    right: 16rpx;

}
</style>
